<template>
	<view>
		<view class="step-list">
			<view class="step-item" :class="[1,2,3].includes(step) ? 'active' : ''">
				<view class="step-content">1</view>
				<text>场地信息</text>
				<view class="step-line">
					<image v-if="[2,3].includes(step)" style="width: 88rpx;height: 14rpx;" src="https://static.wddzq.com/static/step-active.png"></image>
					<image v-else style="width: 88rpx;height: 14rpx;" src="https://static.wddzq.com/static/step-noactive.png"></image>
					<!-- <tui-icon class="tui-top-icon" name="turningright" :size="14" :color="[2,3].includes(step) ? '#FFB803' : '#ccc'" :bold="true"></tui-icon> -->
				</view>
			</view>
			<view class="step-item" :class="[2,3].includes(step) ? 'active' : ''">
				<view class="step-content">2</view>
				<text>提交材料</text>
				<view class="step-line">
					<image v-if="[3].includes(step)" style="width: 88rpx;height: 14rpx;" src="https://static.wddzq.com/static/step-active.png"></image>
					<image v-else style="width: 88rpx;height: 14rpx;" src="https://static.wddzq.com/static/step-noactive.png"></image>
					<!-- <tui-icon class="tui-top-icon" name="turningright" :size="14" :color="[1,2,3].includes(step) ? '#FFB803' : '#ccc'" :bold="true"></tui-icon> -->
				</view>
			</view>
			<view class="step-item" :class="step === 3 ? 'active' : ''">
				<view class="step-content">3</view>
				<text>等待审核</text>
			</view>
			<!-- <view class="step-item">
				<view class="step-content">4</view>
				<text>入驻成功</text>
			</view> -->
		</view>

		<view class="step-one" :class="step === 1 ? 'show' : ''">
			<view class="active-info">
				<view class="title">场地logo</view>
				<u-upload
					:fileList="logoList"
					@afterRead="handleLogoUpload"
					@delete="handleLogoDel"
					multiple
					:maxCount="1"
					width="140"
					height="140"
				></u-upload>
			</view>

			<view class="active-info">
				<view class="t-cell">
					<view class="t-cell-content">店铺名称</view>
					<u-input class="input-flex" inputAlign="right" placeholder="请输入" border="none" fontSize="28" color="#333" @value="formData.name" @input="handleNameInput"></u-input>
				</view>
				<view class="t-cell" @click="handleTypeOpen">
					<view class="t-cell-content">店铺分类</view>
					<view v-if="formData.categoryName" class="t-cell-text" style="flex: 3;overflow: hidden;text-align: right;white-space: nowrap;text-overflow: ellipsis;">{{formData.categoryName}}</view>
					<view v-else class="t-cell-text" style="color: #bbb;">请选择</view>
				</view>
				<view class="t-cell">
					<view class="t-cell-content">场地电话</view>
					<u-input class="input-flex" inputAlign="right" placeholder="请输入" border="none" fontSize="28" color="#333" @value="formData.tel" @input="handleTelInput"></u-input>
				</view>
				<view class="t-cell" @click="handleChooseLocation">
					<view class="t-cell-content">场地地址</view>
					<view v-if="formData.locationName" class="t-cell-text" style="flex: 3;overflow: hidden;text-align: right;white-space: nowrap;text-overflow: ellipsis;">{{formData.locationName}}</view>
					<view v-else class="t-cell-text" style="color: #bbb;">请选择</view>
				</view>
				<view class="t-cell" @click="handleDateClick">
					<view class="t-cell-content">营业时间</view>
					<view v-if="formData.workTime" class="input-text" style="text-align: right;font-size: 28rpx;">{{formData.workTime}}</view>
					<view v-else class="t-cell-text" style="color: #bbb;">请选择</view>
				</view>
			</view>

			<view class="active-info">
				<view class="t-cell" style="flex-direction: column;align-items: flex-start;height: 40rpx;border: none;">
					<view class="t-cell-content">店铺简介</view>
				</view>
				<u--textarea confirmType="return" :maxlength="10000" auth border="none" clearable placeholder="请输入场地简介" :fontSize="24" :height="200" @value="formData.intro" @input="handleIntroChange" ></u--textarea>
			</view>

			<view class="active-info">
				<view class="title">场地相册</view>
				<u-upload
					:fileList="photoList"
					@afterRead="handlePhotoUpload"
					@delete="handlePhotoDel"
					multiple
					:maxCount="20"
					width="140"
					height="140"
				></u-upload>
			</view>

			<view class="active-info">
				<view class="t-cell" @click="handleTagsOpen">
					<view class="t-cell-content">标签信息</view>

					<view v-if="this.formData.tagJson.length > 0" class="input-text" style="text-align: right;font-size: 28rpx;">
						{{this.formData.tagJson.map(item => item.name).join(',')}}
					</view>
					<view v-else class="input-text" style="text-align: right;font-size: 28rpx;color: #bbb;">
						请选择
					</view>
				</view>
			</view>

			<view style="margin: 0 24rpx;">
				<u-button class="btn" @click="handleNext" customStyle="display: flex; flex-direction: column; height: 88rpx; border-radius: 88rpx;background-color: #030303;color: #fff;" color="#fff">
					<text>下一步</text>
				</u-button>
			</view>

		</view>

		<view class="step-two" :class="step === 2 ? 'show' : ''">
			<view class="active-info">
				<view class="title">上传营业执照</view>
				<u-upload
					:fileList="licenseList"
					@afterRead="handleLicenseUpload"
					@delete="handleLicenseDel"
					multiple
					:maxCount="1"
					width="140"
					height="140"
				></u-upload>
			</view>

			<view class="active-info">
				<view class="title">法人身份证<text style="font-size: 24rpx;color: #999;">（正反面）</text></view>
				<u-upload
					:fileList="legalList"
					@afterRead="handleLegalUpload"
					@delete="handleLegalDel"
					multiple
					:maxCount="2"
					width="140"
					height="140"
				></u-upload>
				<view class="t-cell" style="border-top: 1rpx solid #DDDDDD;margin-top: 10rpx;">
					<view class="t-cell-content">法人电话</view>
					<u-input class="input-flex" inputAlign="right" placeholder="请输入" border="none" fontSize="28" color="#333" @value="formData.legalPersonTel" @input="handleLegalTelInput"></u-input>
				</view>
			</view>

			<view style="margin: 0 24rpx;">
				<u-button class="btn" @click="handleSubmit" customStyle="display: flex; flex-direction: column; height: 88rpx; border-radius: 88rpx;background-color: #030303;color: #fff;" color="#fff">
					<text>提交</text>
				</u-button>
			</view>
		</view>

		<view class="step-three" style="text-align: center;" :class="step === 3 ? 'show': ''">
			<image style="width: 320rpx;height: 266rpx;margin-top: 160rpx;" src="https://static.wddzq.com/static/shenhe.png"></image>
			<view style="height: 50rpx;line-height: 50rpx;font-size: 36rpx;font-weight: 500;margin-top: 40rpx;margin-bottom: 12rpx;">正在审核中</view>
			<view style="height: 33rpx;line-height: 30rpx;font-size: 24rpx;color: #999;">资料已提交成功，请耐心等待审核</view>
		</view>
		<view style="height: 30rpx;"></view>

		<!-- 分类 -->
		<u-picker :value="formData.categoryId" :show="showType" @close="handleTypeClose" @cancel="handleTypeClose" @confirm="handleTypeChange" :closeOnClickOverlay="true" :columns="[categoryList]" keyName="name" confirmColor="#333" cancelColor="#333"></u-picker>

		<tui-tags-modal :show="showTags" @close="handleTagsClose" @submit="handleTagsSubmit"></tui-tags-modal>

		<tui-open-time-modal :show="showDate" @close="handleDateClose" @submit="handleDateSubmit"></tui-open-time-modal>

	</view>
</template>

<script>
	import { getActivityCategoryList, commitMerchantApply } from '../../config/api.js';
	import { to, uploadAfter, checkForm } from '../../config/utils.js';
	import { myClubFieldDataStepOne, myClubFieldDataStepTwo } from '../../config/common.js';

	export default {
		data() {
			return {
				step: 1,
				showDate: false,
				showTags: false,
				showType: false,
				tags: [],
				logoList: [],
				photoList: [],
				licenseList: [],
				legalList: [],
				categoryList: [
				],
				formData: {
					// 第一步
					name: '',					// 场地名称
					logoUrl: '',			// 场地logo
					categoryName: '',	// 分类
					categoryId: '',
					tel: '',						// 电话
					address: '',
					locationName: '',
					latitude: '',
					longitude: '',
					workTime: '',
					intro: '',
					photoList: '',
					tagJson: [],

					// 第二步
					businessLicense: '',		// 营业执照
					legalPersonList: '',	// 法人身份证
					legalPersonTel: '',		// 法人电话
				},
			}
		},
		onLoad(params) {
			console.log(params);
			if(params.step) {
				this.step = parseInt(params.step);
			}
		},
		onReady() {
			this.fetchActivityCategoryList();
		},
		methods: {
			async fetchActivityCategoryList() {
				const [err, activityCategory] = await to(getActivityCategoryList());
				if(err) return;
				this.categoryList = [
					...this.categoryList,
					...(activityCategory?.data || [])
				];
			},
			// logo图片上传
			async handleLogoUpload(file) {
				const fileData = await uploadAfter(file.file);

				let fileList = fileData?.filter(item => item.url);
				this.logoList = fileList;
			},
			handleLogoDel(e) {
				const { index} = e;
				let fileList = [...this.logoList];
				fileList.splice(index, 1);

				this.logoList = fileList;
			},

			// 场地图片上传
			async handlePhotoUpload(file) {
				const fileData = await uploadAfter(file.file);

				let fileList = fileData?.filter(item => item.url);
				this.photoList = this.photoList.concat(fileList);
			},
			handlePhotoDel(e) {
				const { index} = e;
				let fileList = [...this.photoList];
				fileList.splice(index, 1);

				this.photoList = fileList;
			},

			handleNameInput(val) {
				this.formData = {
					...this.formData,
					name: val
				};
			},
			handleTelInput(val) {
				this.formData = {
					...this.formData,
					tel: val
				};
			},
			handleIntroChange(val) {
				this.formData = {
					...this.formData,
					intro: val
				};
			},

			// 选择位置
			handleChooseLocation() {
				let that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function (res) {
						uni.chooseLocation({
							latitude: res.latitude,
							longitude: res.longitude,
							success(res) {
								console.log(res);
								that.formData = {
									...that.formData,
									latitude: res.latitude,
									longitude: res.longitude,
									address: res.address,
									locationName: res.name
								};
							},
							fail(e) {
								console.log(e);
							}
						})
					},
					fail(e) {
						console.log(e);
					}
				});
			},
			// 营业时间
			handleDateClick() {
				this.showDate = true;
			},
			handleDateClose() {
				this.showDate = false;
			},
			handleDateSubmit(data) {
				console.log(data);
				if(data?.workTime?.name) {
					this.formData = {
						...this.formData,
						workTime: data?.workTime?.name
					};
				}
			},
			handleTypeOpen() {
				this.showType = true;
			},
			handleTypeClose() {
				this.showType = false;
			},
			handleTypeChange(e) {
				const { value } = e;
				const { id, name } = value[0];
				this.formData = {
					...this.formData,
					categoryName: name,
					categoryId: id,
				};
				this.showType = false;
			},
			// 标签
			handleTagsClose() {
				this.showTags = false;
			},
			handleTagsOpen() {
				this.showTags = true;
			},
			handleTagsSubmit(tags) {
				this.formData.tagJson = tags;
				this.showTags = false;
			},
			handleNext() {
				let params = {
					...this.formData,
					logoUrl: this.logoList.map(item => item.url).join('|'),
					photoList: this.photoList.map(item => item.url).join('|'),
					tagJson: this.formData.tagJson.map(item => item.value).join(',')
				};
				const msg = checkForm(myClubFieldDataStepOne, params);
				console.log(params);
				if(msg) {
					return uni.showToast({
						title: msg,
						icon: 'none'
					})
				}
				this.step = 2;
			},
			async handleSubmit() {
				let params = {
					...this.formData,
					logoUrl: this.logoList.map(item => item.url).join('|'),
					photoList: this.photoList.map(item => item.url).join('|'),
					businessLicense: this.licenseList.map(item => item.url).join('|'),
					legalPersonList: this.legalList.map(item => item.url).join('|'),
					tagJson: this.formData.tagJson.map(item => item.value).join(',')
				};

				// 校验
				const msg = checkForm(myClubFieldDataStepTwo, params);
				if(msg) {
					return uni.showToast({
						title: msg,
						icon: 'none'
					})
				}

				const [err, data] = await to(commitMerchantApply(params));

				if(err) {
					return uni.showToast({
						title: err?.msg || '信息提交失败',
						icon: 'none'
					})
				}

				this.step = 3;
				// uni.showToast({
				// 	title: '提交成功，等待审核...',
				// 	icon: 'none',
				// 	success() {
				// 		// uni.navigateTo({
				// 		// 	url: '/pages/shop-info/shop-info'
				// 		// })
				// 	}
				// });
			},
			// 营业执照 图片上传
			async handleLicenseUpload(file) {
				const fileData = await uploadAfter(file.file);

				let fileList = fileData?.filter(item => item.url);
				this.licenseList = fileList;
			},
			handleLicenseDel(e) {
				const { index} = e;
				let fileList = [...this.licenseList];
				fileList.splice(index, 1);

				this.licenseList = fileList;
			},

			// 法人 图片上传
			async handleLegalUpload(file) {
				const fileData = await uploadAfter(file.file);

				let fileList = fileData?.filter(item => item.url);
				this.legalList = fileList;
			},
			handleLegalDel(e) {
				const { index} = e;
				let fileList = [...this.legalList];
				fileList.splice(index, 1);

				this.legalList = fileList;
			},
			handleLegalTelInput(val) {
				this.formData = {
					...this.formData,
					legalPersonTel: val
				};
			},
		}
	}
</script>

<style>

.step-list {
	display: flex;
	width: 100%;
	justify-content: center;
	background-color: #fff;
	padding: 32rpx 0;
}
.step-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 25%;
}
.step-one, .step-two, .step-three {
	display: none;
}
.show {
	display: block;
}
.step-line {
	width: 90rpx;
	height: 0rpx;
	/* border-bottom: 1rpx dashed #ccc; */
	opacity: 0.6;
	position: absolute;
	top: 2rpx;
	left: 148rpx;
}
.step-item.active .step-line {
	/* border-bottom: 1rpx dashed #FFB803; */
}
.step-item .step-content {
	width: 64rpx;
	height: 64rpx;
	background-color: #ddd;
	border-radius: 32rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36rpx;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 36rpx;
}
.step-item.active .step-content {
	background-color: #FFB803;
}
.step-item.active text {
	color: #333;
}
.step-item text {
	margin-top: 24rpx;
	height: 40rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #999;
	line-height: 40rpx;
	font-weight: 400;
}
.tui-top-icon {
	position: absolute;
	top: -26rpx;
	right: -10rpx;
}


.active-info {
	margin: 24rpx 24rpx;
	padding: 18rpx 24rpx;
	border-radius: 18rpx;
	background-color: #fff;
}

/* 单元格 */
.t-cell {
	display: flex;
	height: 100rpx;
	align-items: center;
	border-bottom: 1rpx solid #DDDDDD;
	position: relative;
}
.t-cell.required::after {
	position: absolute;
	content: '*';
	font-size: 24rpx;
	color: red;
	top: 30rpx;
}
.t-cell:last-child {
	border: none;
}
.t-cell image {
	width: 28rpx;
	height: 28rpx;
	border: 8rpx solid #d9d9d9;
	border-radius: 36rpx;
}
.t-cell .t-cell-content {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}
.t-cell-text {
	font-size: 28rpx;
	color: #333;
}

.input-flex {
	flex: 1;
}

.title {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 24rpx;
	font-weight: bold;
}
</style>
